<!DOCTYPE HTML>
<html>
<%@ include file="../jsp/common.jsp" %>
<%@ page  language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<head>
<link rel="stylesheet" type="text/css" href="css/base_button.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
tr{
	height:2em;
}
</style>
</head>
<body style="background-image:url(img/bg_05.jpg);background-repeat:no-repeat;background-size:100% auto;">
	<div style="width:600px;margin-left:25%;margin-top:100px;">
	<form id="registform" name="registform" method="post">
		<table style="table-layout:fixed;width:80%;">
			<tr>
				<td align="right" width="30%">账号：</td>
				<td width="30%">
					<input type="text" style="width:140px;" name="uaccount" id="uaccount" onblur="valid1();"/>
				</td>
				<td width="40%" align="center"></td>
			</tr>
			<tr>
				<td align="right">姓名：</td>
				<td>
					<input type="text" style="width:140px;" name="uname" id="uname" onblur="valid2();"/>
				</td>
				<td  align="center"></td>
			</tr>
			<tr>
				<td align="right">性别：</td>
				<td>
					<input type="radio" name="gender" value="M" checked="checked"/>男
					<input type="radio" name="gender"  value="F"/>女
				</td>
				<td  align="center">
				</td>
			</tr>
			<tr>
				<td align="right">密码：</td>
				<td>
					<input type="password"  style="width:140px;" name="pwd" id="pwd" onblur="valid3();"/>
				</td>
				<td  align="center"></td>
			</tr>
			<tr>
				<td align="right">确认密码：</td>
				<td>
					<input type="password"  style="width:140px;" name="pwd1" id="pwd1" onblur="valid4();"/>
				</td>
				<td></td>
			</tr>
			<tr>
				<td align="right">出生年月：</td>
				<td>
					<input type="text"   style="width:140px;" name="birthDate" id="birthDate" onblur="valid5();"/>
				</td>
				<td  align="center"></td>
			</tr>
			
			<tr>
				<td></td>
				<td colspan="2">
					<input type="button"  class="button_sub01" value="提交" onclick="register();">
					<input type="reset"  class="button_sub01" value="重置" />
				</td>
			</tr>
		</table>
	</form>
	</div>
	
<script>
/****注册账号提交前校验***/
//定义校验用变量：
 validflag = 0;
//提交前数据校验
	function register(){
		//校验是否有空元素，必须全录
		var formData = $("#registform").serialize();
		var arrs = formData.split("&");//值全部拆分为数组
		var flag=true;//循环标志
		for(i in arrs){
			if((/=$/g).test(arrs[i])){	//正则匹配有一个以'='结尾的表示有空值
				flag = false;
				break;
			}
		}
		if(!flag){
			alert("请将信息补录完整");
			return;
		}
		
		if(validflag){
			alert("请输入正确的信息再提交");
			return;
		}
		
		//校验账号是否已注册
		/**
		此处暂时省略
		*/
		
		//提交数据
		$("#registform").attr("action","registSave.do");
		var url = "registSave.do";
		$.ajax({
			url:url,
			type:"POST",
			data: decodeURIComponent(formData,true),
			async:true,
			success:function(data){
				var retCode = data['resCode'];
				if(retCode=='1'){
					alert("恭喜你，注册成功，即将跳转到登陆页面");
					location.href="index.jsp";
				}else if(retCode=='2'){
					alert("注册失败！");
					return;
				}
			}
		});
	}
	/**输入框离开事件校验**/
	//账号校验
	function valid1(){
		var uaccount = $("#uaccount").val();
		var tipelement = "<span style='color:white;font-size:0.8em;'>请输入4-18位长度字符串账号<\span>";
		if(! /^[a-zA-Z]\w{3,17}$/g.test(uaccount)){
			if(! $("#uaccount").parent().next().text()){
				$("#uaccount").parent().next().append(tipelement);
				validflag++;
			}
			return;
		}else{
			var url = "validUserAcc.do";
			$.ajax({
				url:url,
				type:"POST",
				data: {
					"uaccount":uaccount
				},
				async:true,
				success:function(data){
					var isExists = data['isExists'];
					if(isExists=='1'){
						if(! $("#uaccount").parent().next().text()){
							validflag++;
						}
						tipelement = "<span style='color:white;font-size:0.8em;'>该账号已被注册<\span>";
						$("#uaccount").parent().next().append(tipelement);
					}else{
						if($("#uaccount").parent().next().text()){
							$("#uaccount").parent().next().children().remove();
							validflag--;
						}
						return;
					}
				}
			});
		}
	}
	//姓名校验
	function valid2(){
		var uname = $("#uname").val();
		if(uname.length>2 && uname.length<10){
			var tipelement = "<span style='color:white;font-size:0.8em;'>请输入2-10位中文名字<\span>";
			if(! $("#uname").parent().next().text()){
				$("#uname").parent().next().append(tipelement);
				validflag++;
			}
		}else{
			if($("#uname").parent().next().text()){
				$("#uname").parent().next().children().remove();
				validflag--;
			}
		}
	}
	//密码校验
	function valid3(){
		var pwd = $("#pwd").val();
		if(! /^[0-9A-Za-z]{5,18}$/.test(pwd)){
			var tipelement = "<span style='color:white;font-size:0.8em;'>密码为5-18为数字和字母的组合<\span>";
			if(! $("#pwd").parent().next().text()){
				$("#pwd").parent().next().append(tipelement);
				validflag++;
			}
		}else{
			if($("#pwd").parent().next().text()){
				$("#pwd").parent().next().children().remove();
				validflag--;
			}
		}
	}
	//确认密码校验
	function valid4(){
		var pwd = $("#pwd").val();
		var pwd1 = $("#pwd1").val();
		if(pwd != pwd1 || !pwd){
			var tipelement = "<span style='color:white;font-size:0.8em;'>确认密码与原密码不符，请重新输入<\span>";
			if(! $("#pwd1").parent().next().text()){
				$("#pwd1").parent().next().append(tipelement);
				validflag++;
				$("#pwd1").val('');
			}
		}else{
			if($("#pwd1").parent().next().text()){
				$("#pwd1").parent().next().children().remove();
				validflag--;
			}
		}
	}
	//出生日期校验
	function valid5(){
		var birthDate = $("#birthDate").val();
		if(! /^[12][0-9]{3}-((0[1-9])|(1[0-2]))-(([0-2][0-9])|(3[01]))$/.test(birthDate)){
			var tipelement = "<span style='color:white;font-size:0.8em;'>请按YYYY-MM-DD格式输入生日<\span>";
			if(! $("#birthDate").parent().next().text()){
				$("#birthDate").parent().next().append(tipelement);
				validflag++;
			}
		}else{
			if($("#birthDate").parent().next().text()){
				$("#birthDate").parent().next().children().remove();
				validflag--;
			}
		}
	}
	
	
</script>
</body>